// 快捷键创建组件：VSCode插件支持ES7+ React/Redux/React-Native snippets
// rcc(类react class component)、rfc(函数react function component)
import { Component } from 'react'

export default class Home extends Component {
  // 组件状态数据（位置1）
  // state = {
  //   key: value
  // }

  constructor() {
    super()
    console.log("constructor() 执行了")

    // 声明组件状态数据（位置2 推荐）
    this.state = {
      myName: "大牧"
    }
  }

  componentDidMount () {
    console.log("componentDidMount()执行了")
  }

  componentDidUpdate () {
    console.log("componentDidUpdate()执行了....")
  }

  changeName () {
    // 修改状态数据(React中没有数据双向绑定，数据单向绑定)
    // 修改数据需要同步到页面，需要调用钩子函数
    this.setState({
      myName: "DAMU"
    })
    // 不推荐直接修改：无法重新渲染页面组件
    // this.state.myName = "DAMU"
  }

  render () {
    console.log("render() 执行了")
    return (
      <>
        <h3>首页页面(类)组件 </h3>
        <p>{this.state.myName}</p>
        <p><button onClick={this.changeName.bind(this)}>修改名称</button></p>
      </>

    )
  }
}
